// #region ********** 变量 **********

var levelTwinObjList = []; // 层级孪生体对象列表

// #endregion ********** 变量 **********

// #region ********** TwinIOC 初始化阶段 **********

// 创建并获取场景实例对象
function init() {
  window.tgTwinIOC = new twinIOC();
  let { url, locationId, token } = twiniocConfig;

  // 初始化地点
  tgTwinIOC.initLocation({ locationId, url, token }, (result) => {
    // console.log(result, '初始化地点接口');
  });

  // 注册地点加载完成时间
  tgTwinIOC.uniCall(
    'addEventListener',
    {
      eventName: 'locationInit',
      callback: () => {
        // 显示左侧面板
        document.querySelector('.left-panel-container').style.display = 'block';

        // 获取层级孪生体对象列表
        getLevelTwinObjList();
      },
    },
    (result) => {}
  );
}

// #endregion ********** TwinIOC 初始化阶段 **********

// #region ********** TwinIOC 相关操作 **********

// 获取层级孪生体对象列表
function getLevelTwinObjList() {
  tgTwinIOC.uniCall('getLevelTwinObjList', {}, (result) => {
    console.log(result);

    levelTwinObjList = result.data;
    renderLevelTwinObjList();
  });
}

/**
 * 聚焦孪生体对象
 * @param {string} twinObjId - 孪生体对象的 ID
 */
function focusTwinObj(twinObjId) {
  console.log('聚焦孪生体对象', twinObjId);

  let jsonData = {
    twinObjId: twinObjId,
  };

  tgTwinIOC.uniCall('focusTwinObj', jsonData, (result) => {
    console.log(result);
  });
}

// 点击对象列表项
function onTwinObjectItemClick(dom, twinObjId) {
  // 对象列表项的选中高亮状态
  document.querySelectorAll('.left-panel-container .twin-object .list-group-item').forEach((item) => {
    item.classList.remove('active');
  });

  dom.classList.add('active');
  focusTwinObj(twinObjId);
}

// #endregion ********** TwinIOC 相关操作 **********

// #region ********** HTML界面控件的事件处理函数 **********

// 渲染层级孪生体对象列表
function renderLevelTwinObjList() {
  let levelTwinObjListDom = document.querySelector('.left-panel.twin-object');
  let levelTwinObjListStr = '';

  levelTwinObjList.forEach((item, index) => {
    let twinObjStr = '';
    if (item.twinObjData && item.twinObjData.length) {
      item.twinObjData.forEach((twinItem) => {
        twinObjStr += `<li class="list-group-item" onclick="onTwinObjectItemClick(this, '${twinItem.twinObjId}')">${twinItem.twinObjId}</li>`;
      });
    }

    levelTwinObjListStr += `<div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <div
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapse${index}"
        aria-expanded="true"
        aria-controls="collapse${index}"
      >
        <span>${item.twinCategoryName}</span>

        <div class="accordion-header-right">
          <span class="header-count">${item.twinObjData.length}</span>
          <span class="icon-arrow">></span>
        </div>
      </div>
      
    </h2>
    <div id="collapse${index}" class="accordion-collapse collapse show" aria-labelledby="heading${index}">
      <div class="accordion-body">
        <ul class="list-group">
          ${twinObjStr}
        </ul>
      </div>
    </div>
  </div>`;
  });

  levelTwinObjListDom.innerHTML = levelTwinObjListStr;
}

// #endregion ********** HTML界面控件的事件处理函数 **********

window.onload = function () {
  // 初始化
  // 1. 初始化孪易场景
  init();
};
